<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Number guessing game</title>
    <style>
    html {
        font-family: sans-serif;
    }

    body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
    }

    .lastResult {
        color: white;
        padding: 3px;
    }
    </style>
</head>

<body>
    <h1>好吧!猜数字游戏</h1>
    <p>我们选择了一个1到100之间的随机数。看看你能不能在10圈以内猜出来。我们会告诉你你的猜测是高还是低。</p>
    <div class="form">
        <label for="guessField">输入一个你喜欢的数字: </label>
        <input type="text" id="guessField" class="guessField">
        <input type="submit" value="Submit guess" class="guessSubmit">
    </div>
    <div class="resultParas">
        <p class="guesses"></p>
        <p class="lastResult"></p>
        <p class="lowOrHi"></p>
    </div>
    <script>
    // Your JavaScript goes here
    var randomNumber = Math.floor(Math.random()*100) +1;
    // 随机出现数字
    var guesses = document.querySelector('.guesses');
    // querySelector() 方法仅仅返回匹配指定选择器的第一个元素
    var lastResult =document.querySelector('.lastResult');
    var lowOrHi = document.querySelector('.lowOrHi');
    var guessSubmit = document.querySelector('.guessSubmit');
    var guessField = document.querySelector('.guessField');
    var guessCount = 1;
    // 猜测计数1（用于跟踪玩家有多少猜测）
    var resetButton;

    function checkGuess() {
      var userGuess = Number(guessField.value);
      if(guessCount === 1) {
        guesses.textContent = 'Previos guesses'; 
      }
      guesses.textContent += userGuess + ' ';
      if (userGuess === randomNumber) {
        lastResult.textContent = '祝贺你 赢了三百亿!';
        lastResult.style.backgroundColor = 'green';
        lowOrHi.textContent = '';
        setGameOver();
      }else if (guessCount ===10) {
        lastResult.textContent = ('游戏结束!!!');
        setGameOver();
      }else {
        lastResult.textContent = '错误!';
        lastResult.style.backgroundColor = 'red';
        if (userGuess < randomNumber) {
          lowOrHi.textContent = '数字太小了!!';
        }else if (userGuess > randomNumber) {
          lowOrHi.textContent = '数字太大了!!';

        }
      }

      guessCount++;
      guessField.value = '';
      guessField.focus();
    }
    // 这个函数最后三行 （上面的第26–28行） 让我们为下次猜测值提交做好准备。我们把guessCount变量的值+1，因此玩家消耗了一次机会 （++是一个递增操作符 - 将值+1），然后我们把文本段的值清空，重新将焦点设置在文本段里，准备下一轮游戏。
    guessSubmit.addEventListener('click',checkGuess);

    function setGameOver () {
      guessField.disabled = true;
      guessSubmit.disabled = true;
      resetButton = document.createElement('button');
      resetButton.textContent = '开始新游戏';
      document.body.appendChild(resetButton);
      resetButton.addEventListener('click',resetGame);
    }

    function resetGame() {
      guessCount = 1;

      var resetParas = document.querySelectorAll('.resultParas p');
      for (var i = 0; i <resetParas.length ; i++){
        resetParas[i].textContent = '';
      }

      resetButton.parentNode.removeChild(resetButton);

      guessField.disabled = false;
      guessSubmit.disbled = false;
      guessField.value = '';
      guessField.focus();

      lastResult.style.backgroundColor = 'white';

      randomNumber = Math.floor(Math.random()*100) + 1; 

    }
    </script>
</body>

</html>